<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{list-style: none;}
        #app {background-color: red;}
        #app1{background-color: pink;}
        #aa{background-color: green;}
    </style>
</head>
<body>
    <div id="app">
        <!-- 使用app中使用自定义组件 -->
        <cha-cha></cha-cha>
        <moboth></moboth>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        //注册组件
        //第一参数是组件名  "cha-cha":组件名  {}直接创建组件，省略了Vue.extend.
        //template:用来展示要显示的HTML内容

        //注册全局组件1
        Vue.component(
            "h-left",{
                template:`
                    <div style="float: left;border:1px solid green;">头部左边</div>
                `
            }
        )
        //组件2
        Vue.component(
            "h-right",{
                template:`
                    <div style="float: right;border:1px solid red;">头部右边</div>
                `
            }
        )
        //中间组件
        Vue.component("cha-cha",{
            //引用了1和2 的组件
            template:`
                <div>
                    <h-left></h-left>
                    <h-right></h-right>
                </div>    
            `
        })
        //局部组件对象1
        var myLeft ={
            template:`
                    <div style="float: left;border:1px solid red;">局部头部左边</div>
                `
        }
        //局部组件对象2
        var myRight ={
            template:`
                    <div style="float: right;border:1px solid red;">局部头部右边</div>
                `,
            //注册局部对象1为子对象
            components:{
                myLeft:myLeft
            }
        }
        let vm = new Vue({
            el:'#app',
            //注册局部组件  只能在局部使用
            components:{
                //组件名称:
                moboth:{
                    //局部中引入全局对象1和2
                    template:`
                        <div>
                            <myLeft></myLeft>
                            <myRight></myRight>
                        </div>
                    `,
                    //注册局部组件
                    components:{
                        myLeft:myLeft,
                        myRight:myRight
                    }
                }
            }
        });
        

    </script>
</body>
</html>